<template>
  <div>
    <h1>我是home页</h1>
    <button class='btn' @click="add(2)">+</button>
    {{ num }}
    <button class='btn' @click="reduce(3)">-</button>
    <button class="btn" @click="addAsync">异步+</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  // methods:mapMutations(['addNum', 'reduceNum']),
  methods:{
    addAsync () {
     
      // this.$store.dispatch('addNumAsync')
      this.addNumAsync();
    },
    add(n){
      this.addNum(n);
    },
    reduce(){
      this.reduceNum(5)
    },
    ...mapMutations(['addNum', 'reduceNum']),
    ...mapActions(['addNumAsync'])
  },
  mounted () {
    console.log(mapMutations(['addNum', 'reduceNum']))
    /* 
    {
      addNum(params){
        store.commit('addNum',params)
      },
      reduceNum(params){
        store.commit('reduceNum',params)
      }
    }
    */
  },
  computed: {
    ...mapState(['num'])
  }
}
</script>

<style lang="scss" scoped>
h1{
  color:red;
}
/deep/ h1{
   color:blue;
}
</style>
